<template>
	<view class="container">
		<!-- 图片上传 here-->
		<uni-forms-item label="照片">
			<uni-file-picker v-model="formData.tempFiles" fileMediatype="image" mode="grid" :limit="1"
				:auto-upload="false" :image-styles="imageStyles" @select="onSelectImage" @delete="onDeleteImage"
				   file-extname="png,jpg" @fail="onFail" @progress="onProgress" />
		</uni-forms-item>
		<uni-forms ref="formRef" :model="formData" :rules="rules">
			<!-- 基本信息 -->
			<uni-section title="基本信息" type="line">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="sex">
					<radio-group @change="onRadioChange">
						<label>
							<radio value="男" :checked="formData.sex === '男'" />男
						</label>
						<label>
							<radio value="女" :checked="formData.sex === '女'" />女
						</label>
					</radio-group>
				</uni-forms-item>

				<uni-forms-item label="求职意向" required name="jobTarget">
					<uni-easyinput v-model="formData.jobTarget" placeholder="请输入求职意向" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" required name="major">
					<uni-easyinput v-model="formData.email" placeholder="邮箱" />

				</uni-forms-item>
				<uni-forms-item label="联系电话" required name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<!-- 需要添加的信息here -->
				<uni-forms-item label="个人主页" required name="major">
					<uni-easyinput v-model="formData.website" placeholder="个人主页url" />
				</uni-forms-item>
				<uni-forms-item label="自我评价" required name="major">
					<uni-easyinput type="textarea" v-model="formData.selfEvaluation" placeholder="请输入自我介绍" />
				</uni-forms-item>
				<uni-forms-item label="出生日期" required name="entranceDate">
					<uni-datetime-picker type="date" v-model="formData.birthDate" />
				</uni-forms-item>

				<!-- 荣誉模块 -->
				<uni-section title="所获荣誉" type="line">
					<uni-forms-item label="荣誉" name="honors">
						<view class="tags-container">
							<!-- 荣誉标签展示 -->
							<view v-for="(honor, index) in formData.honors" :key="index" class="tag-item">
								<uni-tag :text='honor' type="primary" :closable="true" @close="removeHonor(index)" />
							</view>

							<!-- 添加按钮 -->
							<view class="add-button" @click="showHonor()">
								<uni-icons type="plusempty" size="24" color="#007AFF" />
							</view>
						</view>
					</uni-forms-item>

					<!-- 荣誉输入弹窗 -->
					<uni-popup ref="honorPopup" type="dialog">
						<uni-popup-dialog mode="input" title="添加荣誉" placeholder="请输入荣誉名称" @confirm="addNewHonor" />
					</uni-popup>
				</uni-section>


			</uni-section>

			<!-- 教育背景 -->
			<uni-section title="教育背景" type="line">

				<uni-forms-item label="入学时间" required name="startDate">
					<uni-datetime-picker type="date" v-model="formData.educations.startDate" />
				</uni-forms-item>
				<uni-forms-item label="毕业时间" required name="graduationDate">
					<uni-datetime-picker type="date" v-model="formData.educations.endDate" />
				</uni-forms-item>
				<!-- 	<uni-forms-item label="GPA删除" name="gpa">
					<uni-easyinput v-model="formData.gpa" placeholder="请输入平均绩点" />
				</uni-forms-item> -->
				<!-- 需要添加的信息here -->
				<uni-forms-item label="学校名称" required name="school">
					<uni-easyinput v-model="formData.educations.school" placeholder="学校名称" />
				</uni-forms-item>
				<uni-forms-item label="学历" required name="degree">
					<uni-easyinput v-model="formData.educations.degree" placeholder="学历" />
				</uni-forms-item>
				<uni-forms-item label="学位" required name="major">
					<uni-easyinput v-model="formData.educations.major" placeholder="专业" />
				</uni-forms-item>
				<uni-forms-item label="备注" required name="remarks">
					<uni-easyinput v-model="formData.educations.remarks" placeholder="备注" />
				</uni-forms-item>
			</uni-section>

			<!-- 项目经历 -->
			<uni-section title="项目经历" type="line">
				<view v-for="(project, index) in formData.projects" :key="index" class="project-item">
					<view class="project-header">
						<text class="project-title">项目{{ index + 1 }}</text>
						<uni-icons type="close" size="20" color="#ff0000" @click="removeProject(index)" />
					</view>

					<uni-forms-item label="项目名称">
						<uni-easyinput v-model="project.name" placeholder="项目名称" />
					</uni-forms-item>

					<uni-forms-item label="担任角色">
						<uni-easyinput v-model="project.role" placeholder="你在项目中的角色" />
					</uni-forms-item>
					<!-- 需要修改这里here -->
					<uni-forms-item label="突出业绩">
						<uni-easyinput v-model="project.achievements" placeholder="突出业绩" />
					</uni-forms-item>

					<uni-forms-item label="项目描述">
						<uni-easyinput type="textarea" v-model="project.description" placeholder="项目详细描述" />
					</uni-forms-item>
				</view>

				<button type="primary" @click="addProject">添加项目经历</button>
			</uni-section>
			<!-- 需要添加 here-->
			<uni-section title="工作经历" type="line">
				<view v-for="(project, index) in formData.workExperiences" :key="index" class="project-item">

					<view class="project-header">
						<text class="project-title">工作{{ index + 1 }}</text>
						<uni-icons type="close" size="20" color="#ff0000" @click="removeWorkExperience(index)" />
					</view>
					<uni-forms-item label="开始时间" required name="startDate">
						<uni-datetime-picker type="date" v-model="project.startDate" />
					</uni-forms-item>
					<uni-forms-item label="结束时间" required name="endDate">
						<uni-datetime-picker type="date" v-model="project.endDate" />
					</uni-forms-item>
					<uni-forms-item label="公司名称">
						<uni-easyinput v-model="project.company" placeholder="公司名称" />
					</uni-forms-item>

					<uni-forms-item label="担任职务">
						<uni-easyinput v-model="project.position" placeholder="你在项目中的角色" />
					</uni-forms-item>
					<uni-forms-item label="业绩">
						<uni-easyinput v-model="project.achievements" placeholder="业绩" />
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput type="textarea" v-model="project.remarks" placeholder="项目详细描述" />
					</uni-forms-item>
				</view>

				<button type="primary" @click="addWorkExperience">添加工作经历</button>
			</uni-section>
			<!-- here需要添加谁 -->
			<uni-forms-item label="其他">
				<!-- <uni-easyinput type="textarea" v-model="" placeholder="项目详细描述" /> -->
			</uni-forms-item>

			<button type="primary" @click="submit">保存简历</button>
		</uni-forms>
	</view>
</template>
<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
    return {
      title: "高潜人才",
      path: `/pages/employment/employment`
    }
  },
  onShareTimeline() {
      return {
        title: '专业人才测评，发现你的潜力！',
        query: 'from=timeline',          // 可选参数
        imageUrl: '/static/wx.png' // 朋友圈专用图片
      }
    }
}
// #endif
</script>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	//here
	const formRef = ref();
	const formData = reactive({
		// 基础信息
		name: '',
		sex: null,
		avatar: '', // 头像路径
		birthDate: '', // 出生日期

		// 求职信息
		jobTarget: '', // 求职意向

		// 联系方式
		phone: '',
		email: '',
		website: '', // 个人主页

		// 个人能力
		selfEvaluation: '', // 自我评价

		// 教育经历（数组结构）
		educations: [{
			startDate: '', // 开始时间
			endDate: '', // 结束时间
			school: '', // 学校名称
			degree: '', // 学历（本科/硕士等）
			major: '', // 学位（学士/硕士等）
			remarks: '' // 备注
		}],

		// 工作经历（数组结构）
		workExperiences: [{
			startDate: '',
			endDate: '',
			company: '', // 公司名称
			position: '', // 职位职务
			achievements: '', // 突出业绩
			remarks: ''
		}],

		// 项目经验（数组结构）
		projects: [{
			name: '', // 项目名称
			role: '', // 担任角色
			description: '', // 项目描述
			achievements: '' // 突出业绩
		}],

		// 获奖情况（字符串数组）
		honors: [],

		// 其他信息
		other: '' // 其他补充信息
	});
	const onRadioChange = (e) => {
		// 更新性别变量的值
		formData.sex = e.detail.value;
	};
	// 图片选择处理
	const onSelectImage = (files) => {
		console.log("洒水")
		formData.tempFiles = files.tempFiles;
	};
	const onFail = (e)=>{
		console.log("shi")
		console.log(e+1)
	}
	// 图片删除处理
	const onDeleteImage = (file) => {
		// console.log(e+1)
		formData.tempFiles = "";
	};

	const onProgress = (e)=>{
	console.log("shi")
		console.log(e)
	}
	// 表单验证规则
	const rules = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		studentId: {
			rules: [{
				required: true,
				errorMessage: '学号不能为空'
			}]
		},
		phone: {
			rules: [{
					required: true,
					errorMessage: '手机号不能为空'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: '手机号格式不正确'
				}
			]
		}
	});

	const honorPopup = ref(null);
	const showHonorInput = ref(null);
	const showHonor = () => {
		honorPopup.value.open()
	}
	// 添加新荣誉
	const addNewHonor = (value) => {
		if (value && value.trim()) {
			formData.honors.push(value.trim());
		}
	};

	// 删除荣誉
	const removeHonor = (index) => {
		formData.honors.splice(index, 1);
	};


	// 添加项目经历
	const addProject = () => {
		formData.projects.push({
			name: '',
			role: '',
			description: ''
		});
	};

	// 删除项目经历
	const removeProject = (index) => {
		formData.projects.splice(index, 1);
	};
	//添加工作
	const addWorkExperience = () =>{
		formData.workExperiences.push({
			company:'',
		});
	}
// 删除项目经历
	const removeWorkExperience = (index) => {
		formData.workExperiences.splice(index, 1);
	};
	// 提交表单
	const submit = async () => {
		try {
			await formRef.value.validate();
			// 这里可以添加提交到服务器的逻辑
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			console.log('表单数据：', formData);
		} catch (err) {
			console.log('表单验证失败：', err);
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.project-item {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f5f5f5;
		border-radius: 8px;
	}

	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.project-title {
		font-weight: bold;
		color: #333;
	}

	button {
		margin-top: 15px;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}

	.tag-item {
		display: inline-flex;
		align-items: center;
	}

	.add-button {
		padding: 6px;
		border: 1px dashed #007AFF;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>